<template>
  <div>
    <button @click="fetchUsers">刷新用户数据</button>
    <ul v-if="users.length > 0">
      <li v-for="user in users" :key="user.id">
        👤 {{ user.name }} - 📧 {{ user.email }}
      </li>
    </ul>
    <p v-else>加载中...</p>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'

const users = ref([])

const fetchUsers = async () => {
  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/users')
    users.value = response.data
  } catch (error) {
    console.error('获取用户失败:', error)
  }
}

// 页面加载时获取一次
onMounted(() => {
  fetchUsers()
})
</script>

<style scoped>
button {
  margin-bottom: 10px;
  padding: 6px 12px;
  background-color: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>
